<template>
  <div>
    <el-container>
      <el-header>
        <!--element-ui导航菜单学习-->
        <el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal" :router="true">
          <el-menu-item index="todolist">处理中心</el-menu-item>
          <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="todolist">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-submenu>
          <el-menu-item index="3">订单管理</el-menu-item>
        </el-menu>
      </el-header>
      <!--tabs-->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
      </el-tabs>
      <!--tabs-->
      <!--dialog-->
      <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
      </el-dialog>
      <!--dialog-->
      <!--输入框-->
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <!--输入框-->
      <el-footer>
        <!--element-ui 按钮学习-->
        <el-button @click.native="startHacking">Let's do it</el-button>
        <div class="block">
          <span class="demonstration">显示默认颜色</span>
          <span class="wrapper">
    <el-button type="success">成功按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    </span>
        </div>
        <br/>
        <div class="block">
          <span class="demonstration">hover 显示颜色</span>
          <span class="wrapper">
            <el-button :plain="true" type="success">成功按钮</el-button>
            <el-button :plain="true" type="warning">警告按钮</el-button>
            <el-button :plain="true" type="danger">危险按钮</el-button>
            <el-button :plain="true" type="info">信息按钮</el-button>
            <el-button plain @click="open3" type="success"> 成功弹窗 </el-button>
            <el-button plain @click="open4" type="warning"> 警告弹窗 </el-button>
            <el-button plain @click="open5" type="danger"> 消息弹窗 </el-button>
            <el-button plain @click="open6" type="info"> 错误弹窗 </el-button>
            <el-button plain @click="open"> 可自动关闭弹窗 </el-button>
            <el-button plain @click="open2"> 不会自动关闭弹窗</el-button>
         </span>
        </div>
        <br/>
        <!--Carousel 走马灯-->
        <div class="block">
          <span class="demonstration">默认 Hover 指示器触发</span>
          <el-carousel height="150px">
            <el-carousel-item v-for="item in 4" :key="item">
              <h3>{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="block">
          <span class="demonstration">Click 指示器触发</span>
          <el-carousel trigger="click" height="150px">
            <el-carousel-item v-for="item in 4" :key="item">
              <h3>{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </div>
        <br/>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeName: 'second',
        dialogVisible: false,
        input: ''
      }
    },
    name: 'element-ui',
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },
      open() {
        const h = this.$createElement;

        this.$notify({
          title: '标题名称',
          message: h('i', {style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
        });
      },
      open2() {
        this.$notify({
          title: '提示',
          message: '这是一条不会自动关闭的消息',
          duration: 0
        });
      },
      open3() {
        this.$notify({
          title: '成功',
          message: '这是一条成功的提示消息',
          type: 'success'
        });
      },

      open4() {
        this.$notify({
          title: '警告',
          message: '这是一条警告的提示消息',
          type: 'warning'
        });
      },

      open5() {
        this.$notify.info({
          title: '消息',
          message: '这是一条消息的提示消息'
        });
      },

      open6() {
        this.$notify.error({
          title: '错误',
          message: '这是一条错误的提示消息'
        });
      }
    }
  }
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
